
    <!-- 高度随数据长度而变化 -->
   <template>
      <view class="tit-box">
        <view class="tit-tip">高度随数据长度而变化</view>
        <view class="btn-tip" :class="{ 'is-sel': curLen === 3 }" @click="toSwitchLen(3)">3条</view>
        <view class="btn-tip" :class="{ 'is-sel': curLen === 6 }" @click="toSwitchLen(6)">6条</view>
        <view class="btn-tip" :class="{ 'is-sel': curLen === 'all' }" @click="toSwitchLen('all')">全部</view>
      </view>
      <view class="vary-swiper">
        <swiper
          vertical
          autoplay
          circular
          interval="3000"
          :style="'height: ' + (swiperList.length > 6 ? 460 : swiperList.length * 60) + 'rpx'"
          :display-multiple-items="swiperList.length > 6 ? 7 : swiperList.length"
        >
          <swiper-item v-for="(item, i) in swiperList" :key="i">
            <view class="item-box">
              <view>{{ item.bonusTime }}</view>
              <view class="name-tip">抽中了 {{ item.awardName }}</view>
            </view>
          </swiper-item>
        </swiper>
      </view>
</template>
 
<script>
export default {
  data() {
    return {
      dataList: [
        { bonusTime: "2023/11/01 10:10", awardName: "iPhone 12 Pro Max" },
        { bonusTime: "2023/11/02 11:15", awardName: "华为Mate 40 Pro" },
        { bonusTime: "2023/11/03 12:20", awardName: "三星Galaxy S21 Ultra" },
        { bonusTime: "2023/11/04 13:25", awardName: "小米11 Ultra" },
        { bonusTime: "2023/11/05 14:30", awardName: "OPPO Find X3 Pro" },
        { bonusTime: "2023/11/06 15:35", awardName: "vivo X60 Pro+" },
        { bonusTime: "2023/11/07 16:40", awardName: "谷歌Pixel 6 Pro" },
        { bonusTime: "2023/11/08 17:45", awardName: "荣耀V40" }
      ], // 数据源
      /* 高度随数据长度而变化 */
      curLen: "",
      swiperList: []
    };
  },
  onLoad() {
    this.toSwitchLen("all"); // 切换数据长度
  },
  methods: {
    /* 切换数据长度 */
    toSwitchLen(e) {
      if (this.curLen === e) return;
      this.curLen = e;
      const rowData = JSON.parse(JSON.stringify(this.dataList));
      if (e === "all") e = rowData.length;
      this.swiperList = rowData.slice(0, e);
    }
  }
};
</script>
 
<style lang="scss" scoped>
.tit-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 60rpx 30rpx 30rpx;
  .tit-tip {
    font-weight: 900;
  }
  .btn-tip {
    font-size: 24rpx;
    color: #ff6348;
    padding: 5rpx 20rpx;
    border: 1px solid #ff7f50;
    border-radius: 15rpx;
  }
  .is-sel {
    color: #fff;
    background: #ff6348;
  }
}
/* 展示一条数据 */
.scroll-notice {
  $noticeHeight: 66rpx;
  display: flex;
  align-items: center;
  flex-direction: row;
  height: $noticeHeight;
  line-height: $noticeHeight;
  padding: 0 24rpx;
  margin: 30rpx;
  background: #fdf6ec;
  border-radius: 12rpx;
  // 小喇叭
  .horn-tip {
    flex-shrink: 0;
    width: 34rpx;
    height: 28rpx;
    margin-right: 10rpx;
  }
  .notice-box {
    flex: 1;
    height: $noticeHeight;
    .item-box {
      display: flex;
      align-items: center;
      font-size: 26rpx;
      .name-tip {
        color: #ff9900;
        margin-left: 6rpx;
      }
    }
  }
  // 向右箭头
  .arrow-tip {
    flex-shrink: 0;
    width: 22rpx;
    height: 22rpx;
  }
}
/* 展示两条数据 */
.fix-two-box {
  margin: 30rpx;
  border: 1px solid #2979ff;
  border-radius: 30rpx;
  .title-box {
    $bgColor: #2979ff; // 字体、线条颜色
    $lineWidth: 140; // 线条长度
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30rpx;
    .line-tip {
      position: relative;
      width: $lineWidth + rpx;
      height: 1rpx;
      background: $bgColor;
    }
    .line-tip::before {
      content: "";
      position: absolute;
      bottom: -7rpx;
      width: $lineWidth / 3 + 10 + rpx;
      height: 1rpx;
      background: $bgColor;
    }
    .line-tip:nth-child(1)::before {
      right: 0;
    }
    .title-tip {
      color: $bgColor;
      font-size: 36rpx;
      margin: 0 20rpx;
      font-weight: 900;
    }
  }
  .fix-swiper {
    height: 150rpx;
    font-size: 28rpx;
    margin-top: 30rpx;
    .item-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 26rpx;
      padding: 10rpx 30rpx;
      .name-tip {
        color: #2979ff;
      }
    }
  }
}
/* 高度随数据长度而变化 */
.vary-swiper {
  margin: 30rpx;
  box-sizing: border-box;
  border-radius: 30rpx;
  border: 1px solid #ff7f50;
  .item-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 26rpx;
    padding: 10rpx 30rpx;
    .name-tip {
      color: #ff6348;
    }
  }
}
</style>
